<template>
	<div class="contact">
		<div class="section">
			<div class="section-container">
				<ul v-if="formData">
					<li>
						<label>
							<dl class="form-group-flex" :class="{'warn': $v.formData.name.$error}">
								<dd class="form-group-flex-item">姓名</dd>
								<dd class="form-group-flex-item">
									<input type="text" placeholder="必填"
										v-model.trim="formData.name"
										@input="$v.formData.name.$touch()">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex" :class="{'warn': $v.formData.mobile.$error}">
								<dd class="form-group-flex-item">主手机</dd>
								<dd class="form-group-flex-item">
									<input type="tel" placeholder="必填(国际手机号码需要添加国家码)"
										v-model.trim="formData.mobile"
										@input="$v.formData.mobile.$touch()">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex">
								<dd class="form-group-flex-item">部门</dd>
								<dd class="form-group-flex-item">
									<span v-for="(item, index) in formData.departments">
										{{item.departmentName}}{{index != formData.departments.length-1 ? '，' : ''}}
									</span>
									<span v-if="formData.departments.length==0" style="color: #7D7D7D;">选填</span>
								</dd>
								<dd class="form-group-flex-item" @click="$router.push({name: 'department_seletor'})"><i class="icon-arrowRight"></i></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex">
								<dd class="form-group-flex-item">职位</dd>
								<dd class="form-group-flex-item">
									<input type="text" placeholder="选填"
										v-model.trim="formData.position">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex" :class="{'warn': $v.formData.email.$error}">
								<dd class="form-group-flex-item">邮箱</dd>
								<dd class="form-group-flex-item">
									<input type="email" placeholder="选填"
										v-model.trim="formData.email"
										@input="$v.formData.email.$touch()">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex">
								<dd class="form-group-flex-item">等级</dd>
								<dd class="form-group-flex-item">
									<span>{{formData.contactLevel}}</span>
									<span v-if="!formData.contactLevel" style="color: #7D7D7D;">选填</span>
								</dd>
								<dd class="form-group-flex-item" @click="$router.push({name: 'contactLevel_seletor'})"><i class="icon-arrowRight"></i></dd>
							</dl>
						</label>
					</li>

					<li>
						<label>
							<dl class="form-group-flex" :class="{'warn': $v.formData.contactSort.$error}">
								<dd class="form-group-flex-item">排序值</dd>
								<dd class="form-group-flex-item">
									<input type="text" placeholder="选填(联系人排序，1为最前)"
										v-model.trim="formData.contactSort"
										@input="$v.formData.contactSort.$touch()">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer" v-if="formData&&!($v.validationGroup.error||$v.validationGroup.$invalid)">
			<button class="btn btn-submit " @click="save(formData, 0)">完成</button>
			<button class="btn btn-submit" @click="save(formData, 1)">保存并继续添加</button>
		</div>
		<div class="footer" v-else>
			<button class="btn btn-submit unable">完成</button>
			<button class="btn btn-submit unable">保存并继续添加</button>
		</div>
	</div>
</template>

<script>

	import { required, numeric, minLength, maxLength, email } from 'vuelidate/lib/validators';
	import ComConfirm from '@/components/comfirm';

	export default {

	  	name: 'contact',

	  	components: {
	  		ComConfirm
	  	},

	  	data () {
		    return {
		    	formData: null,
		    	isValid: false
		    };
	  	},

	  	beforeRouteEnter (to, from, next) {
	  		if (from.name == 'department_seletor') {
  				vm.$store.commit('contactAddFormData/getDepartments', vm.$store.state.departmentSeletor.departments);
  			}
	  		next(vm => {
	  			if (from.name != 'department_seletor'&&from.name != 'contactLevel_seletor') {
	  				let enterpriseId = vm.cache.defaultEnterprise.enterpriseId;
	  				let departmentId = vm.$route.params.departmentId;
	  				vm.setDefaultDepartment(enterpriseId, departmentId).then(
		  				res => {
		  					vm.$store.commit('contactAddFormData/init', {
		  						enterpriseId: enterpriseId,
		  						departments: res
		  					});
		  					vm.initFormData();
		  				}
		  			);
	  			} else {
	  				vm.initFormData();
	  			}
	  		});
	  	},

	  	created () {
	  		fxAPI.api('setAppTitle', {title: '添加联系人'});
	  	},

	  	methods: {
	  		initFormData () {
	  			this.$store.commit('contactAddFormData/setContactLevel', this.$store.state.contactLevelSelector.level);
	  			this.formData = this.$store.state.contactAddFormData.formData;
	  		},

	  		setDefaultDepartment () {
	  			return new Promise((resolve, reject) => {
	  				let enterpriseId = this.cache.defaultEnterprise.enterpriseId;
	  				let departmentId = this.$route.params.departmentId;
	  				if (!departmentId) {
						resolve([]);
	  				} else {
	  					this.$http.post(this.api.eab, {
		  					module: 'department',
			  				action: 'batchGetDepartment',
			  				enterpriseId: enterpriseId,
			  				departmentIds: [departmentId]
			  			}).then(
			  				res => {
			  					if (res.body.result === 1) {
			  						resolve(res.body.data?res.body.data.list:[]);
			  					}
			  				}
			  			);
	  				}
	  			});
	  		},

	  		resetFormData () {
	  			this.setDefaultDepartment().then(
	  				res => {
	  					this.$store.commit('contactAddFormData/init', {
	  						enterpriseId: this.cache.defaultEnterprise.enterpriseId,
	  						departments: res
	  					});
	  					this.initFormData();
	  				}
	  			);
	  		},

	  		save (data, type) {
	  			data = Object.assign(data, {module:'contact', action:'addContactsOfOneUser'});
	  			delete data.departments;
	  			this.$http.post(this.api.eab, data).then(
                    res => {
                        if (res.body.result === 1) {
                        	// this.$toasted.show(res.body.errorMsg);
                            vm.$toast.show({
                                text:res.body.errorMsg,
                                translate:true
                            })
                        	if (type === 0) {
                        		this.$router.go(-1);
                        	} else {
                        		this.resetFormData();
                        	}
                        }
                    }
                );
	  		}
	  	},

	  	validations: {
          	formData: {
	          	name: {
	          		required
	          	},
	          	mobile: {
	          		required,
	              	minLength: minLength(11),
		            maxLength: maxLength(12),
		            isUnique (value) {
		                return /^(\+{0,1}\d{11})$/g.test(value);
		            }
	          	},
	            contactSort: {
	              	numeric
	            },
	        	email: {
	        		email
	        	}
          	},
          	validationGroup: ['formData']
        }
	};
</script>

<style lang="scss" scoped>
	@import '../scss/mixin.scss';
	.contact{
		@include app-top-main-bottom(0, 220px);
		ul{
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			li{
				&:last-child{
					dd{
						&:after{
							border-bottom: none !important;
						}
					}
				}
			}
		}
		.form-group-flex{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			height: 100px;
			line-height: 100px;
			font-size: 28px;
			padding-left: 20px;
			box-sizing: border-box;

			&.warn{
				background: #f5cfc9;
			}

			input{
				background: transparent;
			}

			&-item{
				position: relative;
				-webkit-box-flex: 1;
				    -ms-flex-positive: 1;
				        flex-grow: 1;
				height: 100%;
				text-align: left;
				@include text-ellipsis();
				@include border-1px(#dcdcdc);
			}
			&-item:first-child{
				-webkit-box-flex: 0;
				    -ms-flex-positive: 0;
				        flex-grow: 0;
				-ms-flex-preferred-size: 100px;
				    flex-basis: 100px;
				min-width: 100px;
				text-align: left;
			}
			&-item:nth-child(2){
				padding-left: 10px;
				box-sizing: border-box;
				input{
					width: 100%;
				}
			}
			&-item:last-child{
				-webkit-box-flex: 0;
				    -ms-flex-positive: 0;
				        flex-grow: 0;
				-ms-flex-preferred-size: 60px;
				    flex-basis: 60px;
				min-width: 60px;
				text-align:center;
			}
		}
		.btn{
			margin-top: 10px;
		}
	}

</style>
